<template>
    <div>
        <div class="wrap">

            <el-container>
                <el-header class="top">
                    <div class="box">
                        <el-dropdown>
                    <el-button size="mini" type="info" color="#ccc">当前用户:{{ this.$store.getters.getUser.username }} </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item><b @click="outlogin"> 退出登录</b></el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                    </div>
                    <h3>Xiao U - Management </h3>
                </el-header>
                <el-container>
                    <el-aside width="240px">
                        <v-nav></v-nav>
                    </el-aside>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>
<script>
import vNav from "../components/vNav.vue"
export default {
    data() {
        return {}
    },
    methods: {
        outlogin() {

            this.$confirm('是否确认退出登录？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                sessionStorage.removeItem("userinfo")
                this.$router.push("/login")
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作取消'
                });
            });

        }
    },
    mounted() {
        console.log();
    },
    watch: {},
    computed: {},
    filters: {},
    components: {
        vNav
    }
}
</script>
<style scoped>
b{
    width: 100%;
    height: 100%;
}
#welcome {
    color: #fff;
    font-size: 22px;
    position: relative;
    top: 18px;
}

.top {
    background-color: #373D41;
    font-size: 25px;
    color: #fff;
    text-align: center;

}

.top h3 {
    line-height: 60px;

}

.top .box {
    float: right;
    margin-top: 10px;
    font-size: 20px;
    margin-right: 20px;

}

.top .box span {
    font-size: 18px;
}

.top .box button {
    margin-top: 5px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>